<template>
  <a-card :bordered="false">
    <!--     查询区域-->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row type="flex">
          <a-col>
            <a-button icon="plus" style="margin-right: 20px" type="primary" @click="openAdd()">新增</a-button>
            <a-divider style="margin-right: 20px" type="vertical"/>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="姓名">
              <a-input v-model="queryParam.name" placeholder="请输入姓名"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="邮箱">
              <a-input v-model="queryParam.email" placeholder="请输入邮箱"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="用户类型">
              <a-select v-model="queryParam.type" placeholder="请选择用户类型">
                <a-select-option v-for="(i, index) in typeList" :key="index" :value="i.key"
                >{{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="用户状态">
              <a-select v-model="queryParam.status" placeholder="请选择用户状态">
                <a-select-option v-for="(i, index) in statusList" :key="index" :value="i.key"
                >{{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col flex="auto" style="margin-left: 15px">
             <span class="table-page-search-submitButtons"
                   style="float: left; overflow: hidden; margin-right: 20px">
               <a-button icon="search" style="margin-left: 10px" type="primary"
                                  @click="searchQuery">查询
               </a-button>
               <a-popover :overlayStyle="{ background: 'white' }" placement="topLeft">
                 <template slot="content">
                            <a-icon theme="twoTone" two-tone-color="#52c41a" type="exclamation-circle"/><span
                            style="margin-left: 5px"
                          >可以点击重置来重新筛选结果</span
                          >
                 </template>
                 <a-button icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
               </a-popover>
             </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        bordered
        rowKey="id"
        size="middle"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a-button style="margin-right: 10px" type="primary" @click="handleEdit(record)"> 编辑 </a-button>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a-button> 删除 </a-button>
          </a-popconfirm>
        </span>

      </a-table>
      <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
    </div>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import UserModal from '@views/newPages/userModal.vue'

export default {
  name: 'userManagement',
  components: { UserModal },
  mixins: [JeecgListMixin],
  data() {
    return {
      // queryParam: this.queryParamData,
      typeList: [
        { name: '本地用户 ', key: '1' },
        { name: '外地', key: '2' },
      ],
      statusList: [
        { name: '启用', key: '1' },
        { name: '禁用', key: '2' },
      ],
      confirmLoading: false,
      loading: false,
      title: '',
      visible: false,
      form: this.$form.createForm(this),
      dialogStyle: {
        top: '200px',
        // right:"20px",
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      columns: [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '邮箱',
          align: 'center',
          dataIndex: 'email',
        },
        {
          title: '用户类型',
          align: 'center',
          dataIndex: 'type',
          customRender: (text) => {
            return text === 1 ? '本地用户' : 'AD用户'
          },
        },
        {
          title: '用户状态',
          align: 'center',
          dataIndex: 'status',
          customRender: (text) => {
            return text === 1 ? '启用' : '禁用'
          },
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource: [],
      url: {
        // list: '/api/vl/user/list',
        delete: '/carbon/carbonOverviewYearData/delete',
      }
    }
  },
  methods: {
    openAdd() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
  },
}
</script>

<style scoped>

</style>